/* add the following CSS to reposition the SharePoint ribbon bar and the site's wrapper.*/
/*html.has-ribbon .mdgov-entNav,
html.has-ribbon .mdgov-navBar__nav,
html.has-ribbon .mdgov-notifications*/
/*html.has-ribbon .mdgov-bodynotifications */ /*Commented to position Agency Alerts correctly in authoring env. */
/*{
    top: 45px;
}*/

/* Hide Ribbon Controls */

/* Customized SharePoint 2019 styles for MD Responsive-Design-Toolkit */
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles #ElementWithStyle4-Menu,
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles #ElementWithStyle5-Menu,
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles #ElementWithStyle6-Menu,
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles #ElementWithStyle7-Menu,
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles #ElementWithStyle9-Menu,
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles #ElementWithStyle10-Menu,
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles #ElementWithStyle11-Menu,
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles #ElementWithStyle12-Menu,
#Ribbon\.EditingTools\.CPEditTab\.Paragraph\.ElementWithStyle\.Menu\.Styles #ElementWithStyle13-Menu {
    display: none !important;
}

/*#Ribbon\.EditingTools\.CPEditTab\.Paragraph-Large-0-0,*/
#Ribbon\.EditingTools\.CPEditTab\.Styles,
#Ribbon\.EditingTools\.CPEditTab\.SpellCheck {
    display: none !important;
}

#Ribbon\.EditingTools\.CPEditTab\.Font-Large-0-0,
#Ribbon\.EditingTools\.CPEditTab\.Markup-LargeMedium-1 {
    display: none !important;
}
html.has-ribbon .mdgov-entNav {
    top: 85px;
}

html.has-ribbon .mdgov-outerWrap {
    margin-top: 60px;
}

/* Top menu background color is white, changing to something dark in authoring. Production should apply default colors.*/
html.has-ribbon .mdgov-dropDown__panel {
    background-color: grey;
}

/* Link colors are showing blue in authoring due to corev4.css file. Change them to white.*/
html.has-ribbon .mdgov-masthead a:link {
    color: #fff;
}

html.has-ribbon .mdgov-masthead a:visited {
    color: #fff;
}

html.has-ribbon #mdgovFooter a:link, #mdgovFooter a:link, .mdgov-footer__bottom a {
    /*color: rgba(255,255,255,0.65);*/
      text-decoration: none;
}

html.has-ribbon #mdgovFooter a:visited, #mdgovFooter a:visited {
    /*color: rgba(255,255,255,0.65);*/
      color: #ffffff
}

html.has-ribbon #mdgovFooter a:hover, #mdgovFooter a:hover, .mdgov-footer__bottom a:hover {    
      text-decoration: underline;
}

/* #mdgovMain link color should be white. Since left nav bar also is inside #mdgovMain for 3 col page layouts, its link color has to changed back to black. See below*/
html.has-ribbon #mdgovMain a:link {
    color: #c8122c;
}

html.has-ribbon #mdgovMain a:visited {
    color: #c8122c;
}
/* Since left navbar is inside #mdgovMain for 3 col page layouts, its link color needs to revert to black. */
html.has-ribbon #pageSectionNav a:link {
    color: #000;
}

html.has-ribbon #pageSectionNav a:visited {
    color: #000;
}

/*In mobile view, the left bar was getting overlapped by ribbon and Enterprise Bar*/
html.has-ribbon .mdgov-navBar__nav {
    top:auto;
}

body #s4-ribbonrow {
    position: relative;
    z-index: 1001;
    overflow: visible !important;
    height: 35px;
    line-height: normal;
    background;
    background-color: rgba( 239,239,239,0.78 );
}

    body #s4-ribbonrow *,
    body #s4-ribbonrow *:before,
    body #s4-ribbonrow *:after {
        -webkit-box-sizing: content-box;
        /*  box-sizing: border-box;*/
    }

/*Remove the red bar at the bottom */
/*
html.has-ribbon #s4-workspace {
    width:auto !important;
    height:auto !important;
    position: absolute !important;
    bottom: 0;
}*/

/* To align the top Enterprise header & to disable the Site Settings menu */
html.has-ribbon #header_container {
    height: 0px;
}

/* Fix: left nav sticky feature not working for anonymous user. Works when logged in since corev15.css adds height property. */
body #s4-workspace {
    overflow: visible;
}

/*body #s4-workspace {
    overflow-y: auto !important;
    overflow-x: auto !important;
}*/
/*To enable responsive design in authoring sites where corev4.css is loaded*/
body #s4-bodyContainer {
    min-width: 0px;
}

/*Fix for the Edit webpart menu on the right not displaying.*/
/*.ms-ToolPaneOuter {
    position: fixed;
    z-index: 1003;
    top: 44px;
}*/

/*Styles for Site logo and site name. Replacement for .mdgov-hero__brand style due to page not working in SharePoint designer*/
@media (min-width: 992px) .hero_brand {
    width: auto;
    min-height: 167px;
}

.hero_brand {
    flex: 0 1 auto;
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    align-items: center;
    text-decoration: none !important;
    color: #fff;
    position: relative;
}

.o365cs-nav-leftAlign {
    visibility: hidden;
}

#searchInputBox {
    margin-bottom: 0px;
    background-color: #fff;
    border: 0px;
}


.mdgov-hero {
    justify-content: center;
}

@media only screen and (max-width: 600px) {
	.mdgov-hero__heading {
		text-align: center;    
    		margin: 1rem 0rem 1rem 0;
	}
}

#mdgovFooterContacts a,
#mdgovFooterContacts a:visited,
#mdgovFooterContacts a:hover{
	color:#fff
}

/* Social media icons not showing white after visited */
.mdgov-social a:visited{
   color:#ffffff;
}

/* Page content area visited link color should be #c8122c */
#mdgovMain a:visited{
    color: #c8122c;
}

/* Footer visited link color should be white */
#mdgovFooter a:visited{
    color: #ffffff;
}

/* Carousel Title not showing white color */
#mainSlideShow h3{
	color:#ffffff;
}

.mdgov-entNav__btn {
 min-width: 0em;
}

.ms-rtestate-field h1, h1.ms-rteElement-H1, .ms-rtestate-field h2, h2.ms-rteElement-H2 {
color: #262626;
}

/*Mobile view */
@media only screen and (max-width: 800px) {
  .bottomMargin {
    display:block;
    margin-left:100px;
    }
}
/* Top Navigation text should change to black during hover */
html.has-ribbon .mdgov-navBar__nav>ul li>a:hover {
    color: #000;
    text-decoration: none !important;
}

/*right section nav menu */
.right-sectionNav ul {
        border-left: 4px solid rgba(0, 0, 0, .1);
        list-style-type: none;
        margin: 0;
        padding-left: 10%;
        font-weight: bold;
    }

.right-sectionNav li {
        padding-bottom: 7%;
        
    }
h2:target,
h3:target {
	scroll-margin-top:4em;
	}

/* new button code */

.btn-gold {
background-color:#FFC20D;
color:#2d3133;
padding:8px 15px;
text-align:center;
text-decoration:none;
display:inline-block;
font-size:17px;
line-height:31.92px;
font-weight: bold;
width:fit-content;
border:solid 2px #fff;
border-radius:15px;
cursor:pointer;
transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-gold a {
color:#2d3133;
font-size:17px;
font-weight: bold;
display:inline-block;
width:fit-content;
}

.btn-gold:hover {
background-color:#FFFFFF;
border-color:#D3D3D3;
}

.btn-gold a:visited,
.btn-gold a:hover,
.btn-gold a:hover:visited {
color: #2d3133;
}

/*New Card */
.promo-section {
padding:2rem;
margin-top:0;
}

.promo-grid {
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}

.promo-card {
background:#fff;
border:1px solid #dfe1e2;
border-radius:4px;
box-shadow:0 2px 4px rgba(0, 0, 0, 0.05);
flex:1 1 calc(33.333% - 1rem);
display:flex;
flex-direction:column;
max-width:calc(33.333% - 1rem);
overflow:hidden;
}

.promo-card-body {
padding:1rem;
flex-grow:1;
display:flex;
flex-direction:column;
}

.promo-button {
margin-top:1rem;
display:inline-block;
padding:0.5rem 1rem;
background-color:#FFC20D;
color:#fff;
text-decoration:none;
border-radius:4px;
font-weight:bold;
text-align:center;
}

.promo-card-heading {
font-size:1.25rem;
margin:0 0 0.5rem 0;
color:#1b1b1b;
text-align:center;
}

@media (max-width: 900px) {
.promo-card {
flex:1 1 calc(50% - 1rem);
max-width:calc(50% - 1rem);
}
}

@media (max-width: 600px) {
.promo-card {
flex:1 1 100%;
max-width:100%;
}
}

.card-image-container {
display:flex;
justify-content:center;
padding:1rem 0 0;
}

.card-building {
width:160px;
height:auto;
}

.promo-card {
transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.promo-card:hover {
box-shadow:0 6px 16px rgba(0, 0, 0, 0.15);
cursor:pointer;
}

.card-arrow {
font-size:1.2rem;
margin-left:0.5rem;
vertical-align:middle;
}

.card-arrow {
display:inline-flex;
align-items:center;
justify-content:center;
width:24px;
height:24px;
background-color:#005ea2;
color:#fff;
border-radius:50%;
font-size:14px;
font-weight:600;
margin-left:0.5rem;
vertical-align:middle;
flex-shrink:0;
}
/*step timeline */

.usa-step-indicator {
width:100%;
}

/*container */
.usa-step-indicator__segments {
display:flex;
justify-content:space-between;
list-style:none;
padding:0;
margin:0;
}

/*step style */
.usa-step-indicator__segment {
flex:1 1 0;
text-align:center;
position:relative;
padding-top:3rem;
}

.usa-step-indicator__line {
position:absolute;
top:1.125rem;
height:0.25rem;
background-color:#dfe1e2;
z-index:1;
right:0;
margin:0 auto;
left:0;
width:auto;
}

.usa-step-indicator__segment:first-child .usa-step-indicator__line {
left:50%;
}

.usa-step-indicator__segment:last-child .usa-step-indicator__line {
width:50%;
left:0;
right:auto;
margin:0;
}

.usa-step-indicator__circle {
position:absolute;
top:0;
left:50%;
transform: translateX(-50%);
width: 2.25rem;
height: 2.25rem;
background-color:#dfe1e2;
border-radius:50%;
line-height:2.25rem;
color:#1b1b1b;
font-weight:bold;
z-index:2;
text-align:center;
white-space:nowrap;
}

.usa-step-indicator__segment--complete .usa-step-indicator__line {
background-color:#162e51;
}

.usa-step-indicator__segment--complete .usa-step-indicator__circle {
background-color:#162e51;
color:#fff;
}


.usa-step-indicator__segment--current .usa-step-indicator__line {
background-color:#005ea2;
}

.usa-step-indicator__segment--current .usa-step-indicator__circle {
background-color:#005ea2;
color:#fff;
box-shadow:0 0 0 0.25rem #cfe8ff;
}

.usa-step-indicator__segment-label {
display:block;
margin-top:0.75rem;
font-size:0.875rem;
text-align:center;
}


.usa-step-indicator__header {
text-align:left;
margin-bottom:1rem;
}



.usa-step-indicator__heading {
font-size:1.25rem;
font-weight:600;
margin:0;
}


.usa-step-indicator__current-step {
display:inline-block;
width:1.5rem;
height:1.5rem;
line-height:1.5rem;
background-color:#005ea2;
color:#fff;
text-align:center;
border-radius:50%;
font-weight:bold;
}

.usa-step-indicator__total-steps {
color:#005ea2;
}

.usa-sr-only {
position:absolute !important;
width:1px !important;
height:1px !important;
padding:0 !important;
margin:-1px !important;
overflow:hidden !important;
clip:rect(0, 0, 0, 0) !important;
white-space:nowrap !important;
border:0 !important;
}

@media (max-width: 480px) {
.usa-step-indicator__segment-label {
display:none;
}
}

.timeline-desktop {
display:block;
}

.timeline-mobile {
display:none;
}
.is-hidden {
	display:none
}

@media (max-width: 768px) {
.timeline-desktop {
display:none;
}
.timeline-mobile {
display:block;
}
}




/* custom list 
.usa-list {
padding-left:1.25rem;
margin-bottom:1.5rem;
list-style-type:disc;
}

.usa-list li {
margin-bottom:0.5rem;
}

.usa-list--unstyled {
list-style:none;
padding-left:0;
}
*/


.usa-step-indicator__heading-counter {
font-size:0.875rem;
color:#5b616b;
margin-bottom:0.25rem;
}

.usa-step-indicator__heading-counter {
font-size:0.875rem;
color:#005ea2;
display:inline-flex;
align-items:center;
margin-right:0.5rem;
}